<template>
	<view class="pageBox">
		<!-- 选择地址 -->
		<view class="addressList">
			<view :class="navIndex==index?'item item_active':'item'" v-for="(item,index) in addressList" :key="index" @click="navClick(index,item.id)">
				<view class="left">
					<view class="title">
						{{item.provinceName}} {{item.cityName}} {{item.countyName}}
					</view>
					<view class="cen">
						{{item.detailInfo}}
					</view>
					<view class="foot">
						{{item.userName}}  {{item.telNumber}}
					</view>
				</view>
				<image src="https://imgs.ynz666.com/2025/05/15/M2ZhYzYwYmU0ZTNhMjBhMWI3YjQ5NTE0Zjk5ZTNjZmM=.png" mode="aspectFill" class="right" @click="editAddress(item)"></image>
			</view>
			<!-- <view class="item_kong" v-else>
				请选择地址
			</view> -->
			<view class="address_btn" @click="openPage('address',2)">
				新增地址
			</view>
		</view>
		
		<!-- 身份信息 -->
		<view class="identityInfo">
			<view class="item">
				<view class="name">
					姓名：
				</view>
				<view class="userinfo-value">
					<input @input="pickName" @blur="pickNameBlur" type="text" :value="realName" placeholder="请填写姓名" class="inputClass">
				</view>
			</view>
			<view class="item">
				<view class="name">
					身份证号：
				</view>
				<view class="userinfo-value">
					<input @input="IdCardInput" @blur="IdCardBlur" type="text" :value="IdCard" placeholder="请填写身份证号" class="inputClass">
				</view>
			</view>
			
			<view class="user-privacy" @click="checkMed">
				<image v-if="!activeRadio" src="../../static/mine/checkoff.png" mode="aspectFill"></image>
				<image v-else src="../../static/mine/is_qiandao.png" mode="aspectFill"></image>
				<view v-if="type==1">点击购买即表示同意<text @tap.stop="JumpPage('agreement')" >《下楼休闲吧销氪服务协议》</text></view>
				<view v-if="type==2">点击购买即表示同意<text @tap.stop="JumpPage('agreement')" >《下楼休闲吧服务商服务协议》</text></view>
			</view>
			
			
			<view class="confirmClass" @click="buyCoupon">
				确认升级
			</view>
			<view class="offlineClass" @click="offline">
				线下收货
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		receiverAddressList,apiOrderGoodsBuy
	} from '../../apis/my.js';
	var app = getApp();
	import gongType from '@/utils/debounce.js'
	import loading from '../../components/loading/loading.vue';
	export default {
		data() {
			return {
				loading:true,
				addressList:[],
				addressInfo:{},
				navIndex:0,
				
				realName:'', //真实姓名
				IdCard:'',// 身份证号
				memberCardId:'',
				activeRadio:true,
				type:'',

			}
		},
		onLoad(options){
			if(options.cardId){
				this.memberCardId=options.cardId
			}
			this.type=options.type
			
		},
		onShow() {
			this.receiverAddress();
			
		},
		methods: {
			checkMed(){
				this.activeRadio = !this.activeRadio;			
			},
			navClick(index,id){
				this.navIndex=index
			},
			editAddress(item){
				uni.navigateTo({
					url: `/pageB/address/address?info=${JSON.stringify(item)}`
				})
			},
			receiverAddress(){
				let data={
					page:1,
					pageSize:20
				}
				receiverAddressList(data).then(res=>{
					this.addressList=res.data.list
				})
			},
			IdCardInput(e){
				this.IdCard = e.detail.value;
			},
			IdCardBlur(e){
				this.IdCard = e.detail.value;
			},
			idcard(value) {
			  return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
			},
			// 确认升级
			buyCoupon:gongType.debounce(function (e){
				
				if(this.addressList.length==0){
					uni.showToast({
						title:'请新增收货地址',
						icon:'none'
					})
					return;
				}
				
				
				if(!this.addressList[this.navIndex].adminMemberNickname){
					uni.showToast({
						title:'请选择收货地址',
						icon:'none'
					})
					return;
				}
				if(!this.realName){
					uni.showToast({
						title:'请填写真实姓名',
						icon:'none'
					})
					return;
				}
				if(!this.IdCard){
					uni.showToast({
						title:'请填写身份证号',
						icon:'none'
					})
					return;
				}
				
				let reg=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.IdCard)
				console.log(reg,"regregreg")
				if(!reg){
					uni.showToast({
						title:'输入的身份证号有误',
						icon:'none'
					})
					return;
				}
				
				if(!this.activeRadio){
					uni.showToast({
						title:'请点击下方同意购买',
						icon:'none'
					})
					return;
				}
				
				let data={
					memberCardId:Number(this.memberCardId),
					receiverAddressId:this.addressList[this.navIndex].id,
					realName:this.realName,
					IdCard:this.IdCard,
					qty:1,
				}
				console.log(data,"data")
				
				
				let that=this
				apiOrderGoodsBuy(data).then(payment=>{
					switch(payment.code){
						case 0:
							app.WxPayMent(payment.data).then( res => {
								app.getUserInfo(function(lRes){
									that.mineInfo = lRes;
									uni.navigateBack({
										delta:1
									})
									
								})
							})
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				})
				
				
					
				
			}, 1000),
			// 线下收货
			offline:gongType.debounce(function (e){
				
				if(!this.realName){
					uni.showToast({
						title:'请填写真实姓名',
						icon:'none'
					})
					return;
				}
				if(!this.IdCard){
					uni.showToast({
						title:'请填写身份证号',
						icon:'none'
					})
					return;
				}
				
				let reg=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.IdCard)
				console.log(reg,"regregreg")
				if(!reg){
					uni.showToast({
						title:'输入的身份证号有误',
						icon:'none'
					})
					return;
				}
				
				if(!this.activeRadio){
					uni.showToast({
						title:'请点击下方同意购买',
						icon:'none'
					})
					return;
				}
				
				let data={
					memberCardId:Number(this.memberCardId),
					receiverAddressId:-1,
					realName:this.realName,
					IdCard:this.IdCard,
					qty:1,
				}
				apiOrderGoodsBuy(data).then(payment=>{
					switch(payment.code){
						case 0:
							app.WxPayMent(payment.data).then( res => {
								app.getUserInfo(function(lRes){
									that.mineInfo = lRes;
									uni.navigateBack({
										delta:1
									})
									
								})
							})
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				})
				
			},1000),
			pickName(e){
				if(e.detail.value.length>11){
					uni.showToast({
						title:'最多可输入11个字',
						icon:'none'
					})
				}else {
					this.realName = e.detail.value;
				}
			},
			pickNameBlur(e){
				if(e.detail.value.length>11){
					uni.showToast({
						title:'最多可输入11个字',
						icon:'none'
					})
				}else {
					// this.upadteInfo();
				}
			},
			// 跳转页面
			JumpPage(page){
				switch(page){
					case "index":
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'agreement':
					if(this.type==1){
						uni.setStorageSync('webUrl','https://p.xiuxian.xialoukeji.com/sales.html');
					}else{
						uni.setStorageSync('webUrl','https://p.xiuxian.xialoukeji.com/serviceProvider.html');
					}
						
						uni.navigateTo({
							url:`/pages/agreement/agreement`
						})
					break;
					default:
						uni.navigateTo({
							url:`../${page}/${page}`
						})
					break;
				}
			},
			openPage(page, index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pageC/${page}/${page}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	.addressList{
		margin: 0 25rpx;
		width: 700rpx;
		
		.item{
			display: flex;
			align-items: center;
			padding: 36rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border: 1rpx solid #fff;
			.left{
				flex: 1;
				.title{
					font-weight: 400;
					font-size: 22rpx;
					color: #727272;
				}
				.cen{
					font-weight: 500;
					font-size: 28rpx;
					color: #0B0B0B;
					padding: 8rpx 0 12rpx;
				}
				.foot{
					font-weight: 400;
					font-size: 24rpx;
					color: #0B0B0B;
				}
			}
			.right{
				width: 38rpx;
				height: 38rpx;
			}
		}
		.item_active{
			border: 1rpx solid #FF5C04;
		}
		.address_btn{
			width: 400rpx;
			height: 92rpx;
			background: linear-gradient( 270deg, #FFAF40 0%, #FF5C04 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 150rpx;
			    margin-top: 20rpx;
		}
		.item_kong{
			padding: 36rpx;
			font-size: 30rpx;
			color: #0B0B0B;
		}
	}
	.identityInfo{
		padding: 20rpx 32rpx 0;
		.item{
			width: 614rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 36rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			.name{
				width: 160rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #727272;
			}
			.userinfo-value {
				display: flex;
				align-items: center;
				flex: 1;
				.inputClass{
					width: 100%;
					font-size: 28rpx;
				}
			}
		}
		.confirmClass{
			width: 100%;
			height: 92rpx;
			background: linear-gradient( 270deg, #FFAF40 0%, #FF5C04 100%);
			border-radius: 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.offlineClass{
			width: 100%;
			height: 92rpx;
			background: linear-gradient( 270deg, #FFAF40 0%, #FF5C04 100%);
			border-radius: 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
		}
		
		.user-privacy {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 24rpx 24rpx 0 0 ;
			padding: 20rpx 0;
			text-align: center;
			font-size: 20rpx;
			color: #ABABAB;
			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;
				border-radius: 50%;
			}
		}
	}
}
</style>
